<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>聊天室</title>
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <style type="text/css">
            input{
                width: 150px;
                height: 30px;
                line-height: 25px;
                padding: 5px 10px;
                border-radius: 5px;
                border: 2px solid;
                font-size: 16px;
            }
            #msg{
                width: 300px;
            }
            button{
                width: 80px;
                height: 44px;
                padding: 5px 20px;
                border-radius: 5px;
            }
        </style>
    </head>

    <body>
        聊天室<br/><br/>
        <input type="text" id="sendOutUser" placeholder="自己的用户名">
        <button onclick="connectWebSocket()">上线</button>
        <button onclick="closeWebSocket()">下线</button>
        <br/><br>
        <input type="text" id="msg" placeholder="要发送的信息"/>
        <input type="text" id="receiveUser" placeholder="接收人的用户名"/>
        <button onclick="send()">发送</button>

        <br><br>
        <hr>
        <div id="msgList"></div>

        <script type="text/javascript">
            var websocket = null;
            //连接WebSocket
            function connectWebSocket() {
                var sendOutUser = document.getElementById("sendOutUser").value;
                if (sendOutUser === "") {
                    alert("请输入用户名");
                    return;
                }
                //判断当前浏览器是否支持websocket
                if ('WebSocket' in window) {
                    websocket = new WebSocket("ws://localhost:7070/web-socket/"+document.getElementById("sendOutUser").value);
                } else {
                    alert('当前浏览器 not support websocket')
                }
                //连接发生错误的回调方法
                websocket.onerror = function () {
                    alert("连接发生错误");
                };
                //连接成功建立的回调方法
                websocket.onopen = function () {
                    //websocket.send("hello")
                    // alert("连接成功");
                    var sendOutUser = document.getElementById("sendOutUser")
                    sendOutUser.readOnly = true
                    sendOutUser.style.backgroundColor='#ddd'
                }
                //接收到消息的回调方法
                websocket.onmessage = function (event) {
                    console.log(event.data)
                    innerdiv("",event.data)
                }
                //连接关闭的回调方法
                websocket.onclose = function () {
                    innerdiv("","websocket连接关闭");
                }
                //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
                window.onbeforeunload = function () {
                    closewebsocket();
                }
            }

            //关闭连接
            function closeWebSocket() {
                websocket.close();
            }

            //发送消息
            function send() {
                var m = new Map(); // 空Map
                var sendOutId = document.getElementById("sendOutUser")  //发送者
                var msg = document.getElementById("msg").value  //发送消息
                if (msg === "") {
                    alert("请输入消息");
                    return;
                }
                var receiveUser = document.getElementById("receiveUser").value //接收者
                m.set("sendOutUser",sendOutUser.value);
                m.set("msg",msg)
                // 接收者为空时，type为群聊，否则为私聊
                if (receiveUser === "") {
                    m.set("type",0)
                }else{
                    m.set("receiveUser",receiveUser)
                    m.set("type",1)
                }
                json = mapToJson(m)
                console.log(json)
                websocket.send(json)
                innerdiv("我",msg)
            }

            //map转换为json
            function  mapToJson(map) {
                var obj= Object.create(null);
                for (var[k,v] of map) {
                    obj[k] = v;
                }
                return JSON.stringify(obj);
            }
            //显示聊天记录到页面
            function innerdiv(id,txt){
                var msgList = document.getElementById("msgList")
                if (id === "") {
                    msgList.innerHTML += "<div>" + txt + "</div><br>"
                }else{
                    msgList.innerHTML += "<div>"+ id +": "+txt+ "</div><br>"
                }
            }
        </script>
    </body>
</html>
